<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>栅格系统</title>
        <link rel="stylesheet" type="text/css" href="../layui-lib/layui/css/layui.css">
        <script src="../layui-lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>

        <!--    栅格系统
            为了丰富网页布局，简化HTML/CSS代码的耦合，并提升多终端的适配能力，layui引进了一套具备响应式
            能力的栅格系统，将容器进行了12等分，预设了4*12中CSS排列类，它们在移动设备，平板，桌面中/大尺寸四
            种不同的屏幕下发挥着各自的作用。
            -->
        <!--     栅格布局规则
            1.采用layui-row来定义行,如:
        -->
        <div class="layui-row"></div>
        <!--
            2.采用类似layui-col-md 这样的预设类来定义一组列(column),且放在行(row)内，其中:
                变量md代表的是不同屏幕下的标记
                变量*代表的是该列所占用的12等分数(如6/12),可选值1-12
                如果多个列的等分数值总和等于12，则刚好满行排列，如果大于12，多余的列将自动另起一行。
            3.列可以同时出现最多四种不同的组合，分别是: xs(超小屏幕，如手机),sm(小屏幕，如平板),md(桌面中等屏幕),lg(桌面大型屏幕)。
            4.可对列追加类似layui-col-space5,layui-col-md-offset3这样的预设类来定义列的间距和偏移。
            5.可以在列(column)元素中放入你自己的任意元素填充内容。
          -->
        <!--   布局容器    -->
        <div class="layui-container">
            <!--     定义行       -->
            <div class="layui-row">
                <!--        定义列        -->
                <div class="layui-col-md5" style="background-color: blue">
                    内容5/12
                </div>
                <div class="layui-col-md7" style="background-color: red">
                    内容7/12
                </div>
            </div>
            <!--     定义行       -->
            <div class="layui-row">
                <!--        定义列        -->
                <div class="layui-col-md4" style="background-color: pink">
                    内容4/12
                </div>
                <div class="layui-col-md4" style="background-color: yellow">
                    内容4/12
                </div>
            </div>
<!--            -->
        </div>
    </body>
</html>